<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="/static/js/jquery-3.6.0.min.js"></script>
		<script src="/static/js/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/static/js/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css">
		<script src="/static/js/swiper-bundle.min.js"></script>
		<link rel="stylesheet" href="/static/css/swiper-bundle.min.css">
		<link rel="stylesheet" href="/static/css/index.css">
		<link rel="stylesheet" href="/static/css/navBox.css">
		<title></title>
	</head>
	<body>
		<div class="box">
			<!-- banner开始 -->
			<div class="banner">
				<!-- 这是nav导航开始 -->
				<div class="navBox">
					<div class="navBoxDetail">
						<div class="navImage">
							<img src="/static/img/banner (4).png" alt="">
						</div>
						<div class="navTitle">
							{foreach name="caidan" item="v"}
							<span>{$v.title}</span>
							{/foreach}
						</div>
					</div>
				</div>
				<!-- 这是nav导航结束 -->
				<div class="swiper mySwiper">
					<div class="swiper-wrapper">
						{foreach name="banner" item="v"}
						<div class="swiper-slide">
							<img src="{$v.image}" width="700" alt="">
						</div>
						{/foreach}
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<!-- banner结束 -->
			<!-- 第三部分开始 -->
			<div class="threeBox">
				<div class="threeBoxDetail">
					<div class="threeLeft">
						<div class="video">
							<video src="{$gonggaoVideo.cover}" controls autoplay loop></video>
						</div>
						<div class="leftlogo">
							<div style="height: 1rem;margin-top: 1.2rem; font-size: 0.9375rem;">{$gonggaoVideo.day}</div> {$gonggaoVideo.date}
						</div>
						<span class="leftWord">{$gonggaoVideo.title}</span>
					</div>
					<div class="threeRight">
						<div class="threetop1">
							<div class="top1Title">通知公告</div>
						</div>
						<div class="threetwoDetail">
							<div class="twoleft"></div>
							<div class="tworight">
								{foreach name="gonggaoList" item="v"}
								<div class="tworight1">
									<div style="position: relative;">
										<span class="circle" class="circle"></span>
										<span style="font-size: 0.875rem;display: inline-block;">{$v.createtime}</span>
									</div>
									<div style="font-size: 1.125rem; letter-spacing: 0.0625rem;height: 1.5rem; overflow: hidden; ">
										{$v.title}</div>
								</div>
								{/foreach}
							</div>
						</div>
						<div class="rightnew">
							进入新闻网+
						</div>
					</div>
				</div>
			</div>
			<!-- 第三部分结束 -->
			<!-- 第四部分开始 -->
			<div class="fourBox">
				<div class="body2">
					<div class="tab1">
						<div class="left">主题教育</div>
						<div class="right">查看更多<img src="/static/img/wximg3.png" alt=""></div>
					</div>
					<div class="tab2">
						{foreach name="zhuti" item="v"}
						<div class="hoverOne" style="cursor: pointer">
							<img src="{$v.image}" alt="图片加载失败" title="{$v.title}">
							<div class="backcolorred">
								<span> {$v.title}
								</span>
								<div style="display: flex;justify-content: right;">
									<span class="shizhong"><img src="/static/img/shizhong.png" alt=""></span>
									<span style="font-size: 1rem;display: inline-block;margin-top: 0.7125rem;line-height: 1rem;">
										{$v.date}
									</span>
								</div>
							</div>
							<div class="shadow"></div>
						</div>
						{/foreach}
					</div>

					<div class="tab1">
						<div class="left">工作动态</div>
						<div class="right">查看更多<img src="/static/img/wximg3.png" alt=""></div>
					</div>
					<div class="tab3">
						<div style="width: 35%;">
							<div class="top">
								<div class="left">
									<div class="top1">{$gongzuodongtai[0]['day']}</div>
									<div class="top2">{$gongzuodongtai[0]['date']}</div>
								</div>
								<div class="right">
									<div class="top3">{$gongzuodongtai[0]['title']}</div>
									<div class="top4">{$gongzuodongtai[0]['zhaiyao']}...</div>
								</div>
							</div>
							<div class="top" style="margin-top: 15px;">
								<div class="left">
									<div class="top1">{$gongzuodongtai[1]['day']}</div>
									<div class="top2">{$gongzuodongtai[1]['date']}</div>
								</div>
								<div class="right">
									<div class="top3">{$gongzuodongtai[1]['title']}</div>
									<div class="top4">{$gongzuodongtai[1]['zhaiyao']}...</div>
								</div>
							</div>
						</div>
						<div style="width: 35%;">
							<div class="top" style="margin-top: 0px;">
								<div class="left">
									<div class="top1">{$gongzuodongtai[2]['day']}</div>
									<div class="top2">{$gongzuodongtai[2]['date']}</div>
								</div>
								<div class="right">
									<div class="top3">{$gongzuodongtai[2]['title']}</div>
									<div class="top4">{$gongzuodongtai[2]['zhaiyao']}...</div>
								</div>
							</div>
							<div class="top" style="margin-top: 15px;">
								<div class="left">
									<div class="top1">{$gongzuodongtai[3]['day']}</div>
									<div class="top2">{$gongzuodongtai[3]['date']}</div>
								</div>
								<div class="right">
									<div class="top3">{$gongzuodongtai[3]['title']}</div>
									<div class="top4">{$gongzuodongtai[3]['zhaiyao']}...</div>
								</div>
							</div>
						</div>
						<div style="width: 30%; display: flex;align-items: center;">
							<div class="fourrightWord">
								<div class="fourrightWordimg"><img src="{$gongzuodongtai2.image}" alt=""></div>
								<div class="title1">
									{$gongzuodongtai2.title}
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<!-- 第四部分结束 -->
			<!-- 第五部分开始 -->
			<div class="socialServices">
				<div class="socialColor">
					<div class="socialTitle">
						<div class="socialTitle1">SHEHUIFUWU</div>
						<div class="socialTitle2">社会服务</div>
					</div>

					<div class="socialcontent">
						{foreach name="shehuifuwu" item="v"}
						<div class="socialcontent1">
							<div class="content1top">
								<div class="content1top2">
									<div class="content1top3"></div>
									<div class="content1top2Title">
										{$v.title}
									</div>
								</div>
								<div style="background-color: #fff;height: 8.6875rem;border-radius: 0px 0px 1rem 1rem;position: relative">
									<div class="content1top2text">
										{$v.zhaiyao}...
									</div>
									<div class="content1top2time">
										<img src="/static/img/wximg3.png" alt="">
										<span>{$v.date}</span>
									</div>
								</div>
							</div>
						</div>
					{/foreach}
					</div>
				</div>
			</div>
			<!-- 第五部分结束 -->
			<!-- 第六部分开始 -->
			<div class="sexBox">
				<div class="sexboxDetail">
					<div class="tab1">
						<div class="left">红馆展厅</div>
						<div class="right">查看更多<img src="/static/img/wximg3.png" alt=""></div>
					</div>
					<div class="sexboxbottom">
						<div class="sexboxbottomLeft">
							<div class="sexboxbottomRightimg">
								<img src="{$zhanting1[0]['image']}" alt="">
							</div>
							<div class="sexboxbottomLeft2">
								<div class="sexboxbottomLeft2img1"> <img src="{$zhanting2[0]['image']}" alt=""></div>
								<div class="sexboxbottomLeft2img1"> <img src="{$zhanting2[1]['image']}" alt=""></div>
							</div>
						</div>
						<div class="sexboxbottomRight">
							<div class="sexboxbottomLeft2">
								<div class="sexboxbottomLeft2img1"> <img src="{$zhanting2[2]['image']}" alt=""></div>
								<div class="sexboxbottomLeft2img1"> <img src="{$zhanting2[3]['image']}" alt=""></div>
							</div>
							<div class="sexboxbottomRightimg">
								<img src="{$zhanting1[1]['image']}" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第六部分结束 -->
			<!-- 第七部分开始 -->
			<div class="servenBox">
				<div class="servenBoxDetail">
					<ul class="ul">
						<li style="font-weight: bold" ><a href="">友情链接</a></li>
						{foreach name="youqinglianjie" item="v"}
						<li><a href="{$v.url}" target="_blank">{$v.title}</a></li>
						{/foreach}
					</ul>
				</div>
			</div>
			<!-- 第七部分结束 -->
			<!-- 最后的页脚开始 -->
			<div class="footer">
				<div class="footerbox">
					<div class="footerDetail">
						<div class="footerDetail1">
							<img src="/static/img/banner (4).png" alt="">
						</div>
						<div class="footerDetail2">
							{foreach name="dibu" item="v"}
							<div class="footerDetail2top1">
								<div class="footerDetail2top1left">{$v.title}</div>
								<div class="footerDetail2top1right">{$v.content}</div>
							</div>
							{/foreach}
						</div>
						<div class="footerDetail3">
							<div class="footerDetail3content">

								<div class="footerDetail3content1">
									<a href="">
										<div class="footerDetail3content1img"><img src="/static/img/gfwx.png" alt=""></div>
										官方微信
									</a>

								</div>
								<div class="footerDetail3content1">
									<a href="">
										<div class="footerDetail3content1img"><img src="/static/img/xlwb.png" alt=""></div>
										新浪微博
									</a>

								</div>
							</div>
						</div>
					</div>
					<div class="footerbox2">
						<a href="">Copyright◎山东省城市服务技师学院版权所有</a>
					</div>
				</div>

			</div>
			<!-- 最后的页脚结束 -->
		</div>
		<script>
			$(function() {
				$('.shadow').hide();
				$('.hoverOne').mouseover(function() {
					$(this).find('.shadow').show()
				})
				$('.hoverOne').mouseleave(function() {
					$(this).find('.shadow').hide()
				})
				$('.content1top3').hide()
				$('.socialcontent1').mouseover(function() {
					$(this).find('.content1top3').show()
				})
				$('.socialcontent1').mouseleave(function() {
					$(this).find('.content1top3').hide()
				})


			})
			var swiper = new Swiper(".mySwiper", {
				spaceBetween: 30,
				centeredSlides: true,
				autoplay: {
					delay: 2500,
					disableOnInteraction: false,
				},
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
				},
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
			});
		</script>
	</body>
</html>
